<template>
  <div class="w-[1920px] h-[1080px]">
    <div class="mt-12 h-full">
      <div class="col-span-4 h-1/3">
        <a-tabs activeKey="1" class="h-full bg-green-200">
          <a-tab-pane key="1" class="bg-red-300">
            <template #tab>
              <a-typography-text class="text-xl font-bold">数说海关</a-typography-text>
            </template>
            <div id="echartsBox" ref="echartsDOM" class="min-h-[50px] h-full"></div>
            <div class="w-full mt-[6px] flex items-center justify-around">
              <a-typography-link href="#" class="text-[#154079!important] text-lg">统计快讯</a-typography-link>
              <a-typography-link href="#" class="text-[#154079!important] text-lg">统计月报</a-typography-link>
              <a-typography-link href="#" class="text-[#154079!important] text-lg">贸易指数</a-typography-link>
              <a-typography-link href="#" class="text-[#154079!important] text-lg">数据在线查询</a-typography-link>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>
<script setup lang="jsx">
import * as echarts from 'echarts';
const task2ListData = [
  {
    title: '政府信息公开指南',
    icon: "alarm-audio",
  },
  {
    title: '政府信息公开制度',
    icon: "alarm-image",
  },
  {
    title: '法定主动公开内容',
    icon: "alarm-video",
  },
  {
    title: '政府信息公开年报',
    icon: "full-screen",
  },
  {
    title: '政府信息公开目录',
    icon: "logout",
  },
];
const task2ListData2 = [
  {
    title: '海关总署公告2024年第188号(关于进口哈萨克斯坦牛皮检疫和卫生要求的公告)',
  },
  {
    title: '海关总署公告2024年第186号(关于进口新加坡养殖水产品检验检疫要求的公告)',
  },
  {
    title: '海关总署公告2024年第185号(关于利比里亚共和国籍的应税船舶适用船舶吨税优惠税率的公',
  },
];

onMounted(() => {
  let chart = echarts.init(document.getElementById('echartsBox'));
  let color = ['#7992e9', '#e96563'];
  let echartData = [
    {
      name: '2023-10',
      value1: 1000,
      value2: 2330,
    },
    {
      name: '2023-11',
      value1: 1380,
      value2: 2330,
    },
    {
      name: '2023-12',
      value1: 3500,
      value2: 2000,
    },
    {
      name: '2024-01',
      value1: 1730,
      value2: 1800,
    },
    {
      name: '2024-02',
      value1: 1800,
      value2: 1990,
    },
    {
      name: '2024-03',
      value1: 1500,
      value2: 2330,
    },
    {
      name: '2024-04',
      value1: 1800,
      value2: 2100,
    },
    {
      name: '2024-05',
      value1: 2300,
      value2: 1800,
    },
    {
      name: '2024-06',
      value1: 2300,
      value2: 1800,
    },
    {
      name: '2024-07',
      value1: 2300,
      value2: 1800,
    },
    {
      name: '2024-08',
      value1: 2300,
      value2: 1800,
    },
    {
      name: '2024-09',
      value1: 2300,
      value2: 1800,
    },
  ];
  let xAxisData = echartData.map((v) => v.name);
  //  ["1", "2", "3", "4", "5", "6", "7", "8"]
  let yAxisData1 = echartData.map((v) => v.value1);
  // [100, 138, 350, 173, 180, 150, 180, 230]
  let yAxisData2 = echartData.map((v) => v.value2);
  // [233, 233, 200, 180, 199, 233, 210, 180]
  const option = {
    color: color,
    title: {
      text: '海关出口数据统计',
      x: 'center',
    },
    legend: {
      right: 'center',
      top: 20,
      data: ['进口', '出口'],
    },
    grid: {
      top: '20%',
      left: '2%',
      right: '2%',
      bottom: '20%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          formatter: '{value}月',
          textStyle: {
            color: '#333',
          },
        },
        axisLine: {
          lineStyle: {
            color: '#000000',
          },
        },
        data: xAxisData,
      },
    ],
    dataZoom: [
      {
        // 设置滚动条的隐藏与显示
        show: true,
        // 设置滚动条类型
        type: "slider",
        // 设置背景颜色
        // backgroundColor: "rgb(19, 63, 100)",
        // 设置选中范围的填充颜色
        // fillerColor: "rgb(16, 171, 198)",
        // 设置边框颜色
        // borderColor: "rgb(19, 63, 100)",
        // 是否显示detail，即拖拽时候显示详细数值信息
        showDetail: false,
        // 数据窗口范围的起始数值
        startValue: 0,
        // 数据窗口范围的结束数值（一页显示多少条数据）
        endValue: 5,
        // empty：当前数据窗口外的数据，被设置为空。
        // 即不会影响其他轴的数据范围
        filterMode: "empty",
        // 设置滚动条宽度，相对于盒子宽度
        // width: "50%",
        // 设置滚动条高度
        // height: 8,
        // 设置滚动条显示位置
        left: "center",
        // 是否锁定选择区域（或叫做数据窗口）的大小
        zoomLoxk: true,
        // 控制手柄的尺寸
        handleSize: 0,
        // dataZoom-slider组件离容器下侧的距离
        bottom: 3,
      },
      {
        // 没有下面这块的话，只能拖动滚动条，
        // 鼠标滚轮在区域内不能控制外部滚动条
        type: "inside",
        // 滚轮是否触发缩放
        zoomOnMouseWheel: false,
        // 鼠标滚轮触发滚动
        moveOnMouseMove: true,
        moveOnMouseWheel: true,
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '进口(亿美元)',
        position: 'left',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#000',
          },
        },
        nameTextStyle: {
          color: '#666',
          fontSize: 12,
          lineHeight: 20,
        },
        splitLine: {
          lineStyle: {
            type: 'solid',
            color: '#E9E9E9',
          },
        },
        axisLine: {
          show: true,
        },
        axisTick: {
          show: false,
        },
      },
      {
        type: 'value',
        name: '出口(亿美元)',
        position: 'right',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#000',
          },
        },
        nameTextStyle: {
          color: '#666',
          fontSize: 12,
          lineHeight: 20,
        },
        splitLine: {
          lineStyle: {
            type: 'solid',
            color: '#E9E9E9',
          },
        },
        axisLine: {
          show: true,
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '出口',
        type: 'line',
        smooth: true,
        yAxisIndex: 1,
        // showSymbol: false,/
        symbolSize: 8,
        zlevel: 3,
        lineStyle: {
          normal: {
            color: color[0],
            shadowBlur: 3,
            shadowColor: hexToRgba(color[0], 0.5),
            shadowOffsetY: 8,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: hexToRgba(color[0], 1),
                },
                {
                  offset: 1,
                  color: hexToRgba('#FFFFFF', 1),
                },
              ],
              false,
            ),
            shadowColor: hexToRgba(color[0], 0.1),
            shadowBlur: 10,
          },
        },
        data: yAxisData1,
      },
      {
        name: '进口',
        type: 'line',
        smooth: true,
        yAxisIndex: 0,
        // showSymbol: false,
        symbolSize: 8,
        zlevel: 3,
        lineStyle: {
          normal: {
            color: color[1],
            shadowBlur: 3,
            shadowColor: hexToRgba(color[1], 0.5),
            shadowOffsetY: 8,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: hexToRgba(color[0], 1),
                },
                {
                  offset: 1,
                  color: hexToRgba('#FFFFFF', 1),
                },
              ],
              false,
            ),
            shadowColor: hexToRgba(color[1], 0.1),
            shadowBlur: 10,
          },
        },
        data: yAxisData2,
      },
    ],
  }
  chart.setOption(option);
});

const hexToRgba = (hex, opacity) => {
  let rgbaColor = '';
  let reg = /^#[\da-f]{6}$/i;
  if (reg.test(hex)) {
    rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt('0x' + hex.slice(3, 5))},${parseInt(
      '0x' + hex.slice(5, 7),
    )},${opacity})`;
  }
  return rgbaColor;
};
</script>
<style scoped></style>
